<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<link rel="stylesheet" href="./css/jdtstyle.css">
<style>
    .main{
    }
    .content{
        text-align: center;

    }
</style>
<body>
<div id="app" class="main" >
    <div class="htmleaf-container">

        <div class="container">
            <div class="progress progress-striped">
                <div class="progress-bar">
                </div>
            </div>
        </div>

        <div class="container">
            <div class="progress2 progress-moved">
                <div class="progress-bar2" >
                </div>
            </div>
        </div>
    </div>

    <div class="content" >
        {{wsStat}}
        <br>
        <br>
        CPU使用率: {{cpu}}%
        <br>
        RAM使用率: {{ram}}%
    </div>
</div>


<script src="js/axios.js"></script>
<script src="js/vue-2.6.10.min.js"></script>
<script type="text/javascript">
    var webSocket
    var handlerUrl = "ws://192.168.190.75:8082/api/getPer"

    var app = new Vue({
        el: "#app",
        data: {
            message: 'Hello Vue!',
            cpu: 100,
            ram: 100,
            wsStat: '未连接'
        },
        created: function () {
            console.log("加载~")
            this.initWs()
        },
        methods: {
            initWs() {
                if (webSocket === undefined) {
                    webSocket = new WebSocket(handlerUrl)
                    webSocket.onopen = () => {
                        this.wsStat = "连接已打开"
                        this.sendWsData()
                    }
                    webSocket.onmessage = (res) => {
                        let data = JSON.parse(res.data);
                        this.cpu = (data.cpu + "").substring(0, 5)
                        this.ram = data.ram
                    }
                    webSocket.onerror = () => {
                        this.wsStat = "连接意外关闭"
                        webSocket.close()
                    }
                    webSocket.onclose = () => {
                        this.wsStat = "连接被关闭"
                        webSocket.close()
                    }
                }
            },
            sendWsData() {
                if (webSocket.OPEN && webSocket.readyState === 1) {
                    webSocket.send(0)
                }
            },
        }
    })
</script>
</body>

</html>